<template>
	<!-- 意见反馈 -->
	<view id="feedback">
		<!-- 身 -->
		<view class="feedback_main">
			<view class="main">
				<!-- 建议 -->
				<view class="textarea">
					<textarea v-model="value" placeholder="请写下您的建议，如功能需求、产品问题，我们会努力 改进。"></textarea>
				</view>
				<!-- 上传组件 -->
				<view class="uploader">
					
					<view class="uploader_view">最多上传九张图</view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="hint">如有问题无法进行解决，请联系在线客服！</view>
			<!-- 蒙版 -->
			<view class="model" v-show="show">
				<view class="model_copy">
					<view class="model_succeed">提交成功</view>
					<view class="model_feedback">感谢您的反馈！</view>
					<view class="model_serve">
						我们将尽快解决这个问题以便更好的为您服务。
					</view>
					<view class="affirm" @click="show = false">确认</view>
				</view>
			</view>
		</view>
		<!-- 脚 -->
		<view class="feedback_footer" @click="putIn">
			<view>提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList:[]
			}
		},
		methods: {
			// 点击提交获取当前textarea的值
			putIn() {
				console.log(this.value);
				// 弹出提交成功的盒子
				this.show = true;
			},
		}
	}
</script>

<style lang="less" scoped>
	#feedback {
		display: flex;
		flex-direction: column;
		height: 100%;

		// 身
		.feedback_main {
			flex: 1;
			overflow-y: scroll;

			.main {
				background: #fff;
				height: 1160rpx;
				margin: 20rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.16);

				.textarea {
					flex: 1;

					textarea {
						width: 100%;
						height: 100%;
					}
				}

				.uploader {
					display: flex;
					align-items: flex-end;

					// 上传图片组件内的加号样式
					.van-button__icon {
						font-size: 120rpx;
					}

					.uploader_view {
						padding: 0 20rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			// 提示
			.hint {
				padding: 0 20rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #999999;
			}

			// 蒙版
			.model {
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 1000;
				box-sizing: border-box;
				padding: 0 20rpx;
				text-align: center;

				.model_copy {
					background: #fff;
					position: relative;
					left: 50%;
					top: 45%;
					transform: translate(-50%, -50%);
					padding: 56rpx 0 64rpx 0;

					// 提交成功
					.model_succeed {
						font-size: 48rpx;
						font-weight: bold;
						color: #333;
						padding-bottom: 40rpx;
					}

					// 反馈
					.model_feedback {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}

					// 服务
					.model_serve {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}

					// 确认
					.affirm {
						height: 72rpx;
						border: 2rpx solid rgba(0, 0, 0, 0);
						background: linear-gradient(135deg,
							rgba(40, 200, 78, 1) 0%,
							rgba(15, 212, 29, 1) 100%);
						border-radius: 10rpx;
						padding: 12rpx 46rpx;
						color: #fff;
						font-size: 34rpx;
						font-weight: bold;
						display: inline-block;
						line-height: 72rpx;
						margin-top: 40rpx;
					}
				}
			}
		}

		// 脚
		.feedback_footer {
			padding: 40rpx 20rpx;

			view {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
				background: linear-gradient(135deg,
					rgba(40, 200, 78, 1) 0%,
					rgba(15, 212, 29, 1) 100%);
				border-radius: 10px;
			}
		}
	}
</style>
